import React, { useEffect, useState } from 'react'
import {Tabs,Table,Image,Space,Button,Popconfirm,Pagination} from 'antd'
import api from '@/api'
export default function Index() {
  const [queryParams,setQueryParams]=useState({
    cateId:'',
    keywords:'',
    limit:3,
    page:1,
    type:1
  })
  const [pageBean,setPageBean]=useState({
    page:1, //当前页面
    limit:10,//每页记录数
    totalPage:1,//总页数
    total:0,//统计总条数
    list:[] //数据集合
  })

  const getProductList=async(params)=>{
    const result=await api.product.getProductListApi(params)
    console.log('result',result.data);
    setPageBean({...result.data})
  }

  const deleteProduct=(id)=>{
    console.log('id',id);
  
  }
  useEffect(()=>{
    getProductList(queryParams)
  },[])

  const onchange=(key)=>{
    getProductList({...queryParams,type:key})
    setQueryParams({...queryParams,type:key})
  }
  const goDetail=(arg)=>{
    console.log('arg',arg);
  }

  //页面改变的方法
  const pageChangeHandle=(arg1,arg2)=>{
    console.log('arg1',arg1);
    console.log('arg2',arg2);
    getProductList({...queryParams,page:arg1,limit:arg2})
    setQueryParams({...queryParams,page:arg1,limit:arg2})
  }
  //当pageSize发生变化的时候触发
  const sizeChangeHandle=(current,pagesize)=>{
      console.log('current',current);
      console.log('pagesize',pagesize);
      getProductList({...queryParams,page:current,limit:pagesize})
      setQueryParams({...queryParams,page:current,limit:pagesize})
  }

  /*定义表格的colomns */
  let columns=[
    {
      title:'ID',
      key:'id',
      dataIndex:'id'
    },
    {
      title:'商品名称',
      dataIndex:'storeName'
    },
    {
      title:'商品图片',
      dataIndex:'image',
      render:(arg)=>{
        return <Image width={50} src={arg}></Image>
      }
    },
    {
      title:'操作',
      key:'action',
      render:(arg)=>{
        return <Space>
          <Button type="primary" size="small" onClick={()=>{goDetail(arg)}}>详情</Button>
          <Popconfirm
            placement="topLeft"
            title="提示"
            description="您确定更要删除吗?"
            onConfirm={()=>{deleteProduct(arg.id)}}
            okText="确认"
            cancelText="取消"
          >
            <Button type="primary" size="small" danger onClick={()=>{goDetail(arg)}}>删除</Button>
        </Popconfirm>
         
          </Space>
      }
    }
  ]

  let items=[
    {
      key:'1',
      label:'出售中的商品',
      children:<>
        <Table columns={columns} dataSource={pageBean.list} rowKey={"id"} pagination={false}></Table>
        <Pagination 
          total={pageBean.total} 
          pageSize={pageBean.limit}
          current={pageBean.page}
          onChange={pageChangeHandle}
          showSizeChanger={true}
          pageSizeOptions={[3,5,10,15]}
          onShowSizeChange={sizeChangeHandle}></Pagination>
      </>
    },
    {
      key:'2',
      label:'仓库中的商品',
      children:<>
      <Table columns={columns} dataSource={pageBean.list} rowKey={"id"} pagination={false}></Table>
      <Pagination 
        total={pageBean.total} 
        pageSize={pageBean.limit}
        current={pageBean.page}
        onChange={pageChangeHandle}
        showSizeChanger={true}
        pageSizeOptions={[3,5,10,15]}
        onShowSizeChange={sizeChangeHandle}></Pagination>
    </>
    },
    {
      key:'3',
      label:'已经售罄的商品',
      children:<Table columns={columns} dataSource={pageBean.list} rowKey={"id"}></Table>
    },
    {
      key:'4',
      label:'警戒库存',
      children:<Table columns={columns} dataSource={pageBean.list} rowKey={"id"}></Table>
    },
    {
      key:'5',
      label:'商品回收站',
      children:<Table columns={columns} dataSource={pageBean.list} rowKey={"id"}></Table>
      
    }
  ]
  return (
    <div style={{padding:'20px'}}>
      <h1>商品分类</h1>
      <Tabs defaultActiveKey={"1"} items={items} onChange={onchange}></Tabs>
    </div>
  )
}
